<template>
  <div id="personal-topspeed">
    <div class="topspeed-box">
      <NavBar title="极速持仓" left-arrow @click-left="onClickLeft" />
      <div class="topspeed-body">
        <Tabs v-model="active" color="blue">
          <Tab title="在持"> 内容1 </Tab>
          <Tab title="历史">
            <div class="card" v-for="item in 10" :key="item">
              <div class="card-box">
                <div class="card-head">卖出时间: 2021-08-01 07:32:37</div>
                <div class="card-title">BTC/USDT</div>
                <div class="card-neck">
                  <div class="card-many">买多</div>
                  <div class="card-quantity">
                    <div class="quantity-left">1111.00</div>
                    <div class="quantity-right">USDT</div>
                  </div>
                </div>
                <div class="card-buy">
                  <div>买入价:41864</div>
                  <div>合约盈亏</div>
                </div>
                <div class="card-sell">
                  <div>卖出价:41884.53</div>
                  <div>+8500</div>
                </div>
                <div class="card-duration">订单时长:10秒</div>
              </div>
            </div>
          </Tab>
        </Tabs>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Tabs, Tab } from "vant";
export default {
  components: {
    NavBar,
    Tabs,
    Tab,
  },

  data() {
    return {
      active: 1, // 打开默认标签页
    };
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-topspeed {
  width: 100%;
  min-height: 100vh;
   background-color: #f7f6fb;
  .topspeed-box {
    .topspeed-body { 
      .card {
        background-color: #ffffff;
        width: 355px;
        margin: 20px 10px;
        border-radius: 10px;
        .card-box {
          margin: auto 10px;
          padding-bottom: 10px;
          .card-head {
            color: #588bf7;
            font-size: 16px;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-weight: 600;
          }
          .card-title {
            color: #000;
            font-size: 18px;
            font-weight: 700;
          }
          .card-neck {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 10px;
            .card-many {
              width: 70px;
              height: 28px;
              font-size: 12px;
              border-radius: 20px;
              background: #cd4e65;
              color: #ffffff;
              line-height: 28px;
              text-align: center;
            }
            .card-quantity {
              display: flex;
              font-weight: 600;
              .quantity-left {
                font-size: 18px;
              }
              .quantity-right {
                font-size: 12px;
                position: relative;
                top: 5px;
              }
            }
          }
          .card-buy {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            font-weight: 700;
          }
          .card-sell {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            font-weight: 700;
            margin:5px 0
          }
          .card-duration {
            font-size: 12px;
            font-weight: 700;
          }
        }
      }
    }
  }
  /deep/.van-nav-bar__content{
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #f7f6fb;
  }
  /deep/.van-tabs__wrap{
    width: 100%;
    position: fixed;
    background-color: #fff;
    top: 46px;
  }
  /deep/.van-tabs__content{
    padding: 90px 0 20px ;
  }
}
</style>
